import React,{FC,useRef,useEffect} from 'react';
import style from './index.module.scss';
import BlockImage from '../blockImage';
import {useSelector} from 'react-redux';
import {IBlockImage} from '../../../interface/img';
import debounce from '../../../utils/debounce';

interface Iprops{
    hideCategroy:() => void;
    showSwiperDialog:(imageID: number) => void;
    imageId:number;
    setPageFun:() => void;
}

interface Istore{
    img:{
        curTypeList:IBlockImage[]
    }
}
const Categroy:FC<Iprops> = ({hideCategroy,showSwiperDialog,imageId,setPageFun}) => {

    const {curTypeList} = useSelector((state:Istore) => state.img);

    const wrapDOM = useRef<HTMLDivElement>(null);

    const conDOM = useRef<HTMLDivElement>(null);

    let clientHeight = 0;

    const scroll = debounce(() => {
        //1.获取内容的高度
        let conHeight = (conDOM.current as HTMLDivElement).offsetHeight;
        console.log("===",(wrapDOM.current as HTMLDivElement).scrollTop,clientHeight,conHeight)
        //2.获取wrap的滚动高度
        if(((wrapDOM.current as HTMLDivElement).scrollTop + clientHeight) > (conHeight- 20)){
            console.log("加载下一页数据");
            setPageFun();
        }
    },1000)

    useEffect(() => {
        //可视区域的高度
        clientHeight = (wrapDOM.current as HTMLDivElement).clientHeight;

        (wrapDOM.current as HTMLDivElement).addEventListener('scroll',scroll);
    }, [])

    return <div ref={wrapDOM} className={style.categray_wrap} onClick={hideCategroy}>
        <div className={style.con} ref={conDOM}>
            {curTypeList.map((item,index) => <BlockImage index={index} ImageID={imageId} url={item.Url} showSwiperDialog={()=> showSwiperDialog(imageId)}></BlockImage>)}    
        </div>
    </div>
}

export default Categroy